<template>
	<view>
		<uni-nav-bar :fixed="true" @clickLeft="handleBack" left-icon="back" statusBar="true" title="下单"></uni-nav-bar>
<!-- 租书订单 -->
		
		
		<!-- 内容部分 -->
		<view class="box">
			<myOrder @totPrice="getRentPrice" :payOrder="rentBooks" orderType="购物车(租书)" :freight="freight"></myOrder>
			<myOrder @totPrice="getBuyPrice" :payOrder="buyBooks" orderType="购物车(买书)" :freight="freight"></myOrder>
			
			<!-- foot -->
			<view class="myfoot">
				<view class="" style="height:300rpx;"></view>
				<view style="z-index: 1;" class="foot cu-bar flex justify-between padding bg-white">
					<view class="flex align-center">
						<view class="text-black text-lg">
							总计
						</view>
						<view class="text-price text-xxl text-red padding-left-sm">
							<text>{{finalPrice}}</text>
						</view>
					</view>
					<button id='submitBtn' @click="handlePay" class="cu-btn bg-yellow text-white text-lg">立即支付</button>
				</view>
					
			</view>
			
		</view>
		

		<uni-popup ref="successImg" type="center" :maskClick="true">
			<view class="flex justify-center align-center flex-direction">
				<image style="width: 400rpx;" mode="widthFix" class="image" src="https://ae01.alicdn.com/kf/H8c7601b627784057b958acf1d7f58083a.jpg"></image>
				<text class="text-yellow text-bold text-xxl" style="text-shadow: 0 0 5px white; font-size: 35px;">
					支付成功
				</text>
			</view>
		</uni-popup>
		
		<uni-popup ref="failImg" type="center" :maskClick="true">
			<view class="flex justify-center align-center flex-direction">
				<image style="width: 400rpx;" mode="widthFix" class="image" src="https://ae01.alicdn.com/kf/H8c7601b627784057b958acf1d7f58083a.jpg"></image>
				<text class="text-yellow text-bold text-xxl" style="text-shadow: 0 0 5px white; font-size: 35px;">
					支付失败
				</text>			
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {submitOrder,clearItems} from '../../request/handleReq.js'
	export default {
		

		data() {
			return {
				finalPrice:0,
				freight:0,
				toA:0,
				rentPrice:0,
				buyPrice:0,
				buyRentTolPrice:0,
				buyBooks:this.$store.state.buyBooks,
				rentBooks:this.$store.state.rentBooks,
				
			}
		},
		mounted() {
			this.finalPrice =( this.rentPrice+this.freight+this.buyPrice+this.freight).toFixed(2);
		},
		computed:{
			// finalPrice(){
			// 	return (this.buyPrice + this.rentPrice).toFixed(2)
			// }
		},
		methods: {
			// open(){
			// 	this.$refs["showImg"].open()
			// },
			handlePay(){
				// console.log(this.buyPrice.toFixed(2));
				let buyOrder
				if(this.buyBooks.length > 0){
					buyOrder = {
						// order:{
							money:this.buyPrice.toFixed(2),
							order_type:0,
							order_status:0,
						// },
						// bookMap:buyBookMap
						books:this.buyBooks.map(item => {
							return {
								isbn:item.isbn,
								num:item.num
							}
						})
					}
				}
				
				// console.log(buyOrder);
				let rentOrder
				if(this.rentBooks.length > 0){
					rentOrder = {
						// order:{
							money:this.rentPrice.toFixed(2),
							order_type:1,
							order_status:4,
							pay_time:new Date(),
						// },
						// bookMap:rentBookMap
						books:this.rentBooks.map(item => {
							return{
								isbn:item.isbn,
								num:item.num
							}
						})
					}
				}
				
				
				
				uni.requestPayment({
					provider:'wxpay',
					timeStamp:String(Date.now()),
					nonceStr:'A1B2C3D4E5',
					package:'prepay_id=wx20180101abcdefg',
					signType:'MD5',
					paySign:'',
					success: (res) => {
						console.log(res);
						this.$refs['successImg'].open();
					},
					fail: (reason) => {
						this.$refs['failImg'].open()						
					},
					complete: () => {
						submitOrder(buyOrder,rentOrder);
						clearItems();
						setTimeout(()=>{
							uni.navigateTo({
								url:'../index/index'
							})
						},1500)
					}
				})
			},
			backToIndex(){
				uni.reLaunch({
					url:'../index/index'
				})
			},		
			handleBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			getRentPrice(e){
				this.rentPrice = e;
			},
			getBuyPrice(e){
				this.buyPrice = e;
			}
		}
	}
</script>

<style>
	.box {
		position: absolute;
		width: 100%;
	}

	.canui-kong {
		padding-top: 100rpx;
	}

	.canui-kong-icon {
		width: 260rpx;
		height: 260rpx;
		line-height: 220rpx;
		margin: 0 auto;
		border-radius: 200rpx;
		margin-bottom: 30rpx;
	}

	.canui-kong-icon text {
		font-size: 160rpx;
	}

	.canui-kong .bg-gradual-green {
		margin: 0 auto;
	}

	.cu-list.menu-avatar>.cu-item {
		padding-left: 220rpx;
	}




	uni-picker-view {
		display: block;
	}

	uni-picker-view .uni-picker-view-wrapper {
		display: flex;
		position: relative;
		overflow: hidden;
		height: 100%;
		background-color: white;
	}

	uni-picker-view[hidden] {
		display: none;
	}

	picker-view {
		width: 100%;
		height: 300upx;
		/* margin-top:10upx; */
	}

	picker-view-column {
		line-height: 100upx;
		text-align: center;
	}
</style>
